<script setup>
import { useUserStore } from "@/stores";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { squareUrl, avatarImg } = storeToRefs(userStore);
const {  uploadAvatar,submit } = userStore;

</script>

<template>
  <CardPage>
    <template #title> 更换头像 </template>
    <el-upload
      class="avatar-uploader"
      :show-file-list="false"
      id="uploadbox"
      :on-change="uploadAvatar"
      :auto-upload="false"
    >
      <img :src="avatarImg || squareUrl" class="avatar" />
    </el-upload>
    <el-button type="primary" @click="submit">上传头像</el-button>
  </CardPage>
</template>

<style scoped>
#uploadbox {
  width: 15vw;
  height: 15vw;
  border: 0.1vw dashed gray;
  border-radius: 0.3vw;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#uploadbox:hover {
  border-color: #409eff;
}

#uploadbox .avatar {
  width: 15vw;
  height: 15vw;
  display: block;
}
.el-button {
  width: 6vw;
  height: 2vw;
  margin: 1vw;
}
</style>
